<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <img src="./images/arrlcon_03.jpg" alt="" class="img-fast">
    <!-- 快捷导航 -->
    <div class="shortcut">
      <div class="wrapper">
        <ul>
          <li><a href="#">华为官网</a></li>
          <li><a href="#">荣耀官网</a></li>
          <li><a href="#">软件应用</a></li>
          <li>
            <a href="#">花粉俱乐部<span class="iconfont icon-arrow"></span></a>
          </li>
          <li>
            <a href="#" style="margin-right: 250px; border: none"
              >Select Region</a
            >
          </li>
          <li><a href="#" style="color: #000">登录</a></li>
          <li><a href="#" style="color: #000">注册</a></li>
          <li><a href="#">我的订单</a></li>
          <li><a href="#">V码(优购码)</a></li>
          <li><a href="#">手机版</a></li>
          <li>
            <a href="#">网站导航<span class="iconfont icon-arrow"></span></a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 头部 -->
    <div class="header wrapper">
      <!-- logo -->
      <div style="display: flex">
        <div class="logo">
          <h1><a href="#"></a></h1>
        </div>
        <div class="go-home">商城首页</div>
      </div>
      <div>
        <img
          src="./images/qrcode_vmall_app01.png"
          alt=""
          style="width: 50px; height: 50px; margin-left: 10px"
        />
        <div style="font-size: 10px">微信扫码关注我们</div>
      </div>
    </div>
    <!-- 轮播图 -->
    <!-- banner -->
    <div class="banner">
      <div class="title">
        <ul>
          <li>华为专区</li>
          <li>HUAWEI P10</li>
          <li>HUAWEI Mate9</li>
          <li>HUAWEI Nova</li>
          <li>华为物学6S</li>
          <li>荣耀专区</li>
        </ul>
      </div>
      <img src="./images/2017042210305530.jpg" alt="" style="width: 1800px;"/>
      <div class="wrapper">
        <!-- 侧导航 ul -->
        <div class="subnav">
          <ul>
            <li>全部商品</li>
            <li>手机<a href="#" class="classify">HUAWEI Mate系列</a></li>
            <li>
              平板 & 穿戴<a href="#" class="classify">平板电脑 手环/手表</a>
            </li>
            <li>笔记本电脑</li>
            <li>
              智能家居<a href="#" class="classify">子母路由 电力猫 路由器</a>
            </li>
            <li>专属配件<a href="#" class="classify">贴膜 保护壳 保护套</a></li>
            <li>通用配件<a href="#" class="classify">耳机 音箱</a></li>
            <li style="flex-grow:unset;"></li>
          </ul>
        </div>
        <!-- 圆点指示器 -->
        <ol>
          <li class="current"><i>1</i></li>
          <li><i>2</i></li>
          <li><i>3</i></li>
          <li><i>4</i></li>
          <li><i>5</i></li>
          <li><i>6</i></li>
          <li><i>7</i></li>
        </ol>
      </div>
    </div>
    <div class="goods wrapper">
      <ul>
        <li>
          <img src="./images/20170310105644358.jpg" alt="" />
        </li>
        <li>
          <img src="./images/2017031017165551.jpg" alt="" />
        </li>
        <li>
          <img src="./images/20170310090516264.jpg" alt="" />
        </li>
        <li>
          <img src="./images/20170313143419135.jpg" alt="" />
        </li>
      </ul>
    </div>

    <div class="brand wrapper">
      <ul>
        <li>
          <div class="left">
            <h3>HUAWEI P10 Plus</h3>
            <p>金属钻雕工艺</p>
            <p class="price">¥<span>4388</span></p>
          </div>
          <img src="./images/1489161234073.png" alt="" />
        </li>
        <li>
          <div class="left">
            <h3>HUAWEI P10 Plus</h3>
            <p>金属钻雕工艺</p>
            <p class="price">¥<span>4388</span></p>
          </div>
          <img src="./images/1491476650727.png" alt="" />
        </li>
        <li>
          <div class="left">
            <h3>HUAWEI P10 Plus</h3>
            <p>金属钻雕工艺</p>
            <p class="price">¥<span>4388</span></p>
          </div>
          <img src="./images/1489161234073.png" alt="" />
        </li>
      </ul>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="wrapper">
        <!-- 服务 -->
        <div class="service">
          <ul>
            <li>
              <h5></h5>
              <p>500强企业 品质保证</p>
            </li>

            <li>
              <h5></h5>

              <p>7天退货 15天换货</p>
            </li>

            <li>
              <h5></h5>

              <p>99元起免运费</p>
            </li>

            <li>
              <h5></h5>

              <p>448家维修网点 全国联保</p>
            </li>
          </ul>
        </div>
        <div class="help">
          <div class="left">
            <dl>
              <dt>
                <h5></h5>帮助中心
              </dt>
              <dd><a href="#">购物指南</a></dd>
              <dd><a href="#">配送方式</a></dd>
              <dd><a href="#">支付方式</a></dd>
              <dd><a href="#">常见问题</a></dd>
            </dl>

            <dl>
              <dt>
                <h5></h5>售后服务
              </dt>
              <dd><a href="#">保修政策</a></dd>
              <dd><a href="#">退换货政策</a></dd>
              <dd><a href="#">退换货流程</a></dd>
              <dd><a href="#">保修状态查询</a></dd>
            </dl>

            <dl>
              <dt>
                <h5></h5>技术支持
              </dt>
              <dd><a href="#">售后网点</a></dd>
              <dd><a href="#">荣耀零售店铺</a></dd>
              <dd><a href="#">预约维修</a></dd>
              <dd><a href="#">手机寄修服务</a></dd>
              <dd><a href="#">维修配件价格查询</a></dd>
              <dd><a href="#">软件下载</a></dd>
            </dl>

            <dl>
              <dt>
                <h5></h5>售后服务
              </dt>

              <dd><a href="#">售后政策</a></dd>

              <dd><a href="#">退款说明</a></dd>

              <dd><a href="#">取消订单</a></dd>
            </dl>

            <dl>
              <dt>
                <h5></h5>关注我们
              </dt>

              <dd><a href="#">在线客服</a></dd>

              <dd><a href="#">新浪微博</a></dd>

              <dd><a href="#">腾讯微博</a></dd>
              <dd><a href="#">花粉俱乐部</a></dd>
              <dd><a href="#">商城手机版</a></dd>
            </dl>
          </div>
        </div>
        <!-- 版权 -->
        <div class="copyright">
          <p>
            <a href="#">友情链接：</a>| <a href="#">华为官网</a>|
            <a href="#">华为消费者业务</a>| <a href="#">荣耀官网</a>|
            <a href="#">花粉俱乐部</a>| <a href="#">莫塞尔商城</a>|
            <a href="#">爱旅官网</a>|<a href="#">华为应用市场 | 万表网 | 中商情报网 | 刷机精灵 | 华为手机 | 优购物官网 | 智能电视 | UC浏览器 |</a>
          </p>
          <p><a href="#">中关村商城 | 酷狗音乐 | 华为商城手机版 | 百信手机网 | 卡宝宝网 | 多特软件下载 | 同步助手 | 蜂鸟摄影网 | 奇珀论坛 | 家具商城 | 拍鞋网商城 | 欧宝丽珠宝 | 寻购网 | 亿智蘑菇 | 安卓市场 |</a></p>
          <p><a href="#">阿里巴巴生意经 | 手机大全 | 安卓软件园 | 卓大师刷机 | 智机论坛 | 电子产品世界 | 历趣网 | 网购返利 | Apple110 | 91手机门户网 | 移动叔叔 | 奥特莱斯 | 荣耀Magic | 携程租车 | </a><a href="#" style="color: red;">申请链接 >></a></p>
          <p>隐私政策 服务协议 Copyright ? 2012-2017 VMALL.COM 版权所有 保留一切权利</p>
          <div style="display: flex;align-content: center;justify-content: center;">
            <h5 style="background-image: url(./images/20160226162651249.png); width: 20px;height: 20px;margin-right: 5px;"></h5>
            <p>公安备案 苏公网安备 32011402010009号 | 苏ICP备09062682号-9 | 增值电信业务经营许可证：苏B2-20130048 | 网络文化经营许可证：苏网文[2015] 1599-026号</p>
          </div>
          <div>
            <ul style="display: flex;justify-content: center;margin-top: 10px;">
              <li><img src="./images/20161224180914742.jpg" alt=""></li>
              <li><img src="./images/20160226162415360.png" alt=""></li>
              <li><img src="./images/20160226162521265.png" alt=""></li>
              <li><img src="./images/20160226162531395.png" alt=""></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>


